<template>
    <div class="w_h_100">
        <div class="inlet">报表统计 > 监管报送 > 季报 > <span class="size">政府性融资担保机构季度报表</span></div>
        <div class="header d_f j_c_s_b m_t_10">
            <div class="d_f">
                <h4>季度报送</h4>
                <el-dropdown @command="handleCommand">
                    <span class="dropdown">
                        {{ month }}
                        <el-icon class="">
                            <ArrowDown />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="(item, index) in arr" :key="index" :command="item">{{ item
                                }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <el-button type="primary" :icon="Bottom" @click="downloadOut">下载</el-button>
        </div>
        <div class="report m_t_16 ">
            <div class="w_100 headTips d_f j_c_s_b">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    政府性融资担保机构季度报表
                </div>
                <div>数据单位：家、万元、倍、户、%</div>
            </div>
            <div class="box">
                <div>说明</div>
                <div class="m_l_5 m_t_5">1.外币数据须按报告期末最后一天国家外汇管理局公布的基准汇价折合为人民币数据进行汇总。</div>
                <div class="m_l_5 m_t_5">2.填列的金额按四舍五入保留整数；报表中划横线部分不需填列。</div>
                <div class="m_l_5 m_t_5">3.小微企业、农户及新型农业经营主体、战略性新兴产业主体、首贷户、贷款担保交叉的，可以重复统计。</div>
                <div class="m_l_5 m_t_5">4.本报表为季报。</div>
                <div class="m_l_5 m_t_5">5.名单内机构融资担保直保余额同比增速：是指按照填报截至日名单内政府性融资担保机构口径统计的融资担保直保余额同比增速。在计算增速时，需保持机构范围的一致性。如果在一年中政府性融资担保机构法人数量有增加，在计算去年政府性融资担保机构直保余额时也应加上今年新增的机构历史的直保余额。有减少的情况操作类似。</div>
                <div class="m_l_5 m_t_5">6.校验关系：[A]+[B]-[C]=[D]，[805]+[812]=[804]，[805D]÷[803D]=[813D]，[815]+[819]=[814]，[820B]÷[805C]=[821D]，[822D]÷[823D]=[824D]。</div>
            </div>
            <mytable :fields="fields" ref="tableRef" :values="{}" :defaultList="records" class="m_t_20"
                :isSelection="false" :isPaginationShow="false" :handle="false" :serial="false">
                <template v-slot:projectName="{ row }">
                    <div :style="{ marginLeft: row.num * 6 + 'px' }">{{ row.projectName }}</div>
                </template>
            </mytable>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
import { superviseList, superviseDownload } from "../../../api/report"
import { momentDate, momentStartOf, derivation, momentEndOf } from '../../../utils/date'
import { compensationRecovery } from '../../../type/report'
import { useRoute } from 'vue-router';
import { Bottom } from '@element-plus/icons-vue'
export default defineComponent({
    name: '',
    setup() {
        const data: compensationRecovery = reactive({
            startTime: '',
            endTime: '',
            key: '',
            month: '',
            arr: [],
            fields: [
          {
            label: '项目',
            prop: 'projectName',
            width: '250px',
          },
          {
            label: '代码',
            prop: 'code',
            width: '150px',
          },
          {
            label: 'A',
            prop: 'code',
            width: '150px',
            children:[
            {
            label: '期初数',
            prop: 'initialNumber',
            width: '150px',
          },
            ],
          },
          {
            label: 'B',
            prop: 'code',
            width: '200px',
            children:[
            {
            label: '本季度增加（发生额）',
            prop: 'monthlyIncrease',
            width: '200px',
          },
            ],
          },
          {
            label: 'C',
            prop: 'code',
            width: '300px',
            children:[
            {
            label: '本季度减少/解除（发生额）',
            prop: 'monthlyDecrease',
            width: '300px',
          },
            ],
          },
          {
            label: 'D',
            prop: 'code',
            width: '150px',
            children:[
            {
            label: '期末数/期间数',
            prop: 'closingBalance',
            width: '150px',
          },
            ],
          },
       
        ],
            records: [],
            value:'',
        })
        const route = useRoute()
        onBeforeMount(() => {
            let year = momentDate('YYYY')
            for (let i = 1; i <= 4; i++) {
                data.arr.push(year + '年' + i + '季度')

            }
            data.startTime = route.query.startTime as string
            data.endTime = route.query.endTime as string
            data.key = route.query.key as string
            data.month = route.query.month as string
            data.value=route.query.value as string
            methods.getData()
        })

        const methods = {
            getData() {
                superviseList({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime,usci:data.value }).then((res: any) => {
                    res.map(item=>{
            item.num=item.projectName.split(' ').length - 1
            for (let i in item) {
                            if (item[i] == '' || item[i] == null || item[i] == undefined) {
                                item[i] = '-'
                            }
                        }
           })
           
                    data.records = res
                })
            },
            //下载全部模版
            downloadOut() {
                superviseDownload({ reportSuperviseType: route.query.type as string, startTime: data.startTime, endTime: data.endTime,usci:data.value }).then((res: any) => {
                    derivation(res, '政府性融资担保机构季度报表')
                })
            },
            //选择月份
            handleCommand(e: number) {
                console.log(e,'aaa');
                data.month = String(e)
                data.arr.map((item: string, index: number) => {
                    if (item == String(e)) {
                        data.key = String(index)
                    }
                })
                methods.getBoundingClientRect()
            },
            //获取开始时间跟结束事件
            getBoundingClientRect() {
                let num = '1'
                let num1 = '3'
                if (data.key == '0') {
          num = '01'
          num1 = '03'
        } else if (data.key == '1') {
          num = '04'
          num1 = '06'
        } else if (data.key == '2') {
          num = '07'
          num1 = '09'
        } else if (data.key == '3') {
          num = '10'
          num1 = '12'
        }
                let year = momentDate('YYYY')
                let date = year + '-' + num
                let date1 = year + '-' + num1
                data.startTime = momentStartOf(date, 'YYYY-MM-DD')
                data.endTime = momentEndOf(date1, 'YYYY-MM-DD')
                console.log(data.startTime, data.endTime);
                methods.getData()
            },
        }
        return {
            ...toRefs(data),
            ...methods, Bottom
        }
    }
})
</script>
<style scoped lang='scss'>
.header {
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: 20px;
    padding: 24px 32px;

    .dropdown {
        color: #1878FF;
        font-size: 16px;
        font-weight: bold;
        margin-left: 24px;
    }
}

.report {
    overflow-y: auto;
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    height: calc(100% - 164px);
    padding: 20px 32px;
}

.box {
    background: rgba(24, 120, 255, 0.03);
    width: calc(100% - 40px);
    padding: 20px;
    margin-top: 20px;
    color: #86909C;
    font-size: 12px;
}
</style>